<template>
  <div class="analysis-bg">
    <div class="mb30 f aic jcsb">
      <div class="f aic">
        {{currQuestion+1 }} <el-tag type="danger" class="ml10" size="small"  v-if="currQuestionData.questionType=='1'" >单选题</el-tag>
      <el-tag type="danger" class="ml10" size="small" v-if="currQuestionData.questionType=='2'" >多选题</el-tag>
    <el-tag type="danger" class="ml10" size="small" v-if="currQuestionData.questionType=='3'" >判断</el-tag>
      </div>
    </div>
    <div class="mb20" v-html="currQuestionData.questionTitle">

    </div>
    <div>
      <div v-if="currQuestionData.questionType!=3"  class="f aic mb15" v-for="(itemQa, index) in currQuestionData.questionAnswersList" :key="index"
        :class="{
          'active-option':currQuestionData.userAnswerStr.indexOf(itemQa.optionLabel)>-1// itemQa.rightState==true
        }" >
        <div class="answer-sign f jcc mr10">{{ itemQa.optionLabel }}</div>
        {{ itemQa.content }}
        <div class="ml20" >
          <svg-icon v-if="itemQa.rightState" icon-class="right" size="25" />
          <svg-icon v-else icon-class="error" size="25" />
        </div>
<!--        <img  style="margin-left: 10px;" v-if="currQuestionData.rightAnswers.indexOf(itemQa.optionLabel)==-1" src="@/assets/images/teaching/cuo-ico.png" width="25">
        <img  style="margin-left: 10px;" v-if="currQuestionData.rightAnswers.indexOf(itemQa.optionLabel)!=-1" src="@/assets/images/teaching/dui-ico.png" width="25">-->
      </div>
      <el-radio-group v-else v-model="currQuestionData.userAnswerStr"  text-color="#12c83a" fill="#12c83a"  disabled
                      class="vertical-radio-group">
        <el-radio v-for="(itemQa, index) in currQuestionData.questionAnswersList" :key="index+11110"
                  :label="itemQa.optionLabel" size="large" class="vertical-radio">{{ itemQa.content }}
          <div class="ml20" >
            <svg-icon v-if="itemQa.rightState" icon-class="right" size="25" />
            <svg-icon v-else icon-class="error" size="25" />
          </div>
<!--
          <img style="margin-left: 10px;" v-if="currQuestionData.rightAnswerStr.indexOf(itemQa.optionLabel)==-1" src="@/assets/images/teaching/cuo-ico.png" width="25">
          <img  style="margin-left: 10px;" v-if="currQuestionData.rightAnswerStr.indexOf(itemQa.optionLabel)!=-1" src="@/assets/images/teaching/dui-ico.png" width="25">
-->

        </el-radio>
      </el-radio-group>


<!--      <div-->
<!--        class="f aic mb15"-->
<!--        :class="{-->
<!--          'active-option': activeOption == 2,-->
<!--          'error-option': errorOption == 2,-->
<!--        }"-->
<!--      >-->
<!--        <div class="answer-sign f jcc mr10">B</div>-->
<!--        ①③-->
<!--      </div>-->
<!--      <div-->
<!--        class="f aic mb15"-->
<!--        :class="{-->
<!--          'active-option': activeOption == 3,-->
<!--          'error-option': errorOption == 3,-->
<!--        }"-->
<!--      >-->
<!--        <div class="answer-sign f jcc mr10">C</div>-->
<!--        ②④-->
<!--      </div>-->
<!--      <div-->
<!--        class="f aic mb15"-->
<!--        :class="{-->
<!--          'active-option': activeOption == 4,-->
<!--          'error-option': errorOption == 4,-->
<!--        }"-->
<!--      >-->
<!--        <div class="answer-sign f jcc mr10">D</div>-->
<!--        ③④-->
<!--      </div>-->
    </div>

    <div class="f answer-bg">
      <div class="f1 f column jcc aic">
        <div class="bold C12c83a mb10 f20">{{ rightAnswers }}</div>
        <div class="f14">正确答案</div>
      </div>
      <div class="f1 f column jcc aic">
        <div class="bold Cda0007 mb10 f20">{{currQuestionData.userAnswerStr==''?'未作答':currQuestionData.userAnswerStr}}</div>
        <div class="f14">你的答案</div>
      </div>
    </div>

    <div>
      <div class="analysis-title mt40 mb20 ml10">解析</div>
      <div class="line30" v-html="currQuestionData.answersOntleed">

      </div>
    </div>

    <div class="answer-card mt20">
      <div class="question-num-box f ais fw">
        <div
          class="question-num"
          :class="{
            'current-question': index == currQuestion,
            'error-question': item.rightState==false,
          }"
          @click="handleChange(index)"
          v-for="(item, index) in dataObj.stuAnswersQuestions"
          :key="index"
        >
          {{ index+1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">


const activeOption = ref(1);
const errorOption = ref(3);
const currQuestion = ref(1);
const currQuestionData = ref({});
const errorQuestion = ref([1, 22, 35]);
const props = defineProps(['dataObj'])
const rightAnswers = ref("");
const userAnswer = ref("");
const userAnswerArr = ref([]);

const handleChange = (index) => {
  currQuestionData.value = props.dataObj.stuAnswersQuestions[index];
  currQuestion.value = index;
  setAnswer();
};
for (let i = 0; i < props.dataObj.stuAnswersQuestions.length; i++) {
  handleChange(i)
}
handleChange(0)

function setAnswer() {
  let curData = currQuestionData.value;

  if(curData.questionType=='3'){
    let rightStateTrue =(JSON.parse( curData.rightAnswers)[0]=='正确');
    let rightStateFalse = (JSON.parse( curData.rightAnswers)[0]=='错误');
    curData.pdAnswer= JSON.parse( curData.rightAnswers)[0]
    currQuestionData.value.questionAnswers = "[{\"content\":\"正确\",\"optionLabel\":\"正确\",\"rightState\":"+rightStateTrue+"},{\"content\":\"错误\",\"optionLabel\":\"错误\",\"rightState\":"+rightStateFalse+"}]";
  }

  curData.questionAnswersList = JSON.parse(curData.questionAnswers);

  let rightAnswerData =  JSON.parse(curData.rightAnswers);
  let rightAnswerStr = "";
  for (let i = 0; i < rightAnswerData.length; i++) {
    rightAnswerStr+=rightAnswerStr==""?rightAnswerData[i]:","+rightAnswerData[i] ;
  }
  rightAnswers.value = rightAnswerStr;

  let answerData =  JSON.parse(curData.answer);
  let userAnswerStrTemp = "";
  for (let i = 0; i < answerData.length; i++) {
    userAnswerStrTemp+=userAnswerStrTemp==""?answerData[i]:","+answerData[i] ;
  }
  if(curData.questionType=='1'){
    currQuestionData.value.userAnswerStr = userAnswerStrTemp;
    currQuestionData.value.userAnswer = userAnswerStrTemp;
  }else{
    currQuestionData.value.userAnswerStr = userAnswerStrTemp;
    currQuestionData.value.userAnswer = curData.answer;
  }
  currQuestionData.value.rightAnswerStr =  rightAnswerStr.split(',').sort().join(',');
  let trueAnswerWer = rightAnswerStr.split(',').sort().join(',');
  let userAnswerStr = userAnswerStrTemp.split(',').sort().join(',');
  curData.rightState = trueAnswerWer==userAnswerStr;
}

</script>
<style lang="scss" scoped>


:deep(.vertical-radio-group) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .vertical-radio {
    margin-bottom: 15px;
    /* 单选按钮文字样式 */
    .el-radio__label {
      font-size: 16px;
      color: #000;
      display: flex;
      align-items: center;

    }

    .el-radio__input.is-checked + .el-radio__label {
      color: rgba(71,155,251);
    }
    .el-radio__input {
      .el-radio__inner {
        width: 32px;
        height: 32px;
        border-color: #d6d6d6;

        &::after {
          width: 16px;
          height: 16px;
          background-color: rgba(71,155,251);
        }
      }

      &.is-checked {
        .el-radio__inner {
          border-color:rgba(71,155,251);
          background: #fff;
        }

        .el-radio__label {
          border-color: rgba(71,155,251);
          background: #fff;
        }
      }
    }
  }
}


.analysis-bg {
  background: linear-gradient(180deg, #fff5f2 0%, #ffffff 12%);
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 20px;
  margin-top: 20px;
  .answer-sign {
    width: 32px;
    height: 32px;
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    color: #6c6c6c;
    line-height: 30px;
  }
  .active-option {
    color: rgba(71,155,251);
    .answer-sign {
      background: rgba(71,155,251);
      border-color: rgba(71,155,251);
      color: #fff;
    }
  }
  .error-option {
    color: #da0007;
    .answer-sign {
      background: #da0007;
      border-color: #da0007;
      color: #fff;
    }
  }
  .answer-bg {
    background: #f7f9fc;
    border: 1px solid #ffffff;
    border-radius: 10px;
    height: 90px;
    margin-top: 70px;
  }
  .C12c83a {
    color: #12c83a;
  }
  .Cda0007 {
    color: #da0007;
  }

  .analysis-title {
    padding-left: 25px;
    background: url("@/assets/images/analysis.png") left center no-repeat;
  }
  .line30 {
    line-height: 30px;
  }

  .question-num-box {
    width: calc(100% - 40px);
    transition: height 0.5s ease;
    overflow: hidden;
    .question-num {
      width: 32px;
      height: 32px;
      border-radius: 5px;
      background: #f5f7fa;
      color: #3f4952;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      flex-shrink: 0;
      margin: 10px 20px 10px 0;
      cursor: pointer;
    }
    .error-question {
      background: rgba(240, 35, 35, 0.5) !important;
      color: #fff;
    }
    .current-question {
      background: #f02323 !important;
      color: #fff;
    }
  }
}
</style>
